{{~it.images :image:index}}
<div
        class="image-container{{? image.rotatable && image.rotateBtnVisible}} rotating{{?}}"
        style="
                top: {{=image.top}}px;
                left: {{=image.left}}px;
                width: {{=image.width}}px;
                height: {{=image.height}}px;
                display: {{?image.hidden}}none{{??}}block{{?}};
                transform: rotate({{= image.rotation || 0}}deg);
                transform-origin: {{= image.originX}}% {{= image.originY}}%;
                "
        data-type="image"
        data-index="{{=index}}"
        data-group="{{= image.group || ''}}"
>
  <img src="{{=it.fullPath + '/' + image.image}}"  
                usemap="#triangleMap2"
                style="
                width: {{=image.width}}px;
                height: {{=image.height}}px;
                "
  />
    
   <map class="map" name="triangleMap2">
       <area class="area" shape="circle" coords="{{=image.width-10}},30,100" data-triangle="{{=image.materialIndex}}" data-index="1"  >
       <area class="area" shape="circle" coords="30,{{=image.height - 10}},100" data-triangle="{{=image.materialIndex}}"  data-index="2">
       <area class="area" shape="circle" coords="{{=image.width-10}},{{=image.height-10}},100"  data-triangle="{{=image.materialIndex}}" data-index="3">
    </map>
     
   
    {{? image.rotatable}}
  <div class="rotate-btn"></div>
    {{?}}
    {{? image.canMoveTransformOrigin}}
  <div class="transform-origin" style="top: {{=image.originY}}%; left: {{=image.originX}}%;"></div>
    {{?}}
    {{? image.isResizer}}
  <div class="resizer"></div>
    {{?}}
</div>
{{~}}

